import { createRouter, createWebHashHistory } from 'vue-router'
import myPayStub from '../views/myPayStub/myPayStub.vue'

const routes = [
  {
    path: '/',
    name: 'myPayStub',
    component: myPayStub
  },
  {
    path: '/salaryHistory',
    name: 'salaryHistory',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "salaryHistory" */ '../views/salaryHistory/salaryHistory.vue')
  },
  {
    path: '/yearEndBonus',
    name: 'yearEndBonus',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "yearEndBonus" */ '../views/yearEndBonus/yearEndBonus.vue')
  },
  {
    path: '/collectInfo',
    name: 'collectInfo',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "collectInfo" */ '../views/collectInfo/collectInfo.vue')
  },
  {
    path: '/myPayStub2',
    name: 'myPayStub2',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "myPayStub2" */ '../views/myPayStub2/myPayStub2.vue')
  },
  {
    path: '/alittleSalary',
    name: 'alittleSalary',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "alittleSalary" */ '../views/alittleSalary/alittleSalary.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
